<template>
    <div class="page-container">

        <el-row>
            <el-col :span="12">
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
                    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>

                </el-breadcrumb>
            </el-col>

        </el-row>
        <el-row>

            <el-form label-width="60px" >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="用户名">
                            <el-input v-model="query.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="角色">
                            <el-select v-model="query.roleId">
                                 <el-option v-for="role in roles"
                                            :label="role.name"
                                            :value="role.roleId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item >
                            <el-button type="success">搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>

        </el-row>
        <el-row>


            <el-button-group>
                 <el-button type="success" @click="add">添加</el-button>
                <el-button>导入</el-button>
                <el-button>导出</el-button>
                <el-button>打印</el-button>

            </el-button-group>
            <el-table :data="users">
                   <el-table-column prop="username" label="用户名">
                   </el-table-column>
                   <el-table-column prop="role.name" label="角色"></el-table-column>

                   <el-table-column>
                         <template #default="scope">
                            <el-button type="warning" @click="edit(scope.row)">编辑</el-button>
                             <el-button type="danger">删除</el-button>
                         </template>
                   </el-table-column>
            </el-table>
        </el-row>



        <el-dialog v-model="info.isVisible">


              <el-form label-width="60px">


                  <el-form-item label="用户名">
                       <el-input v-model="info.username"></el-input>
                  </el-form-item>
                  <el-form-item label="角色">
                       <el-select v-model="info.roleId">
                               <el-option v-for="role in roles"
                                          :label="role.name"
                                          :value="role.roleId"></el-option>
                       </el-select>
                  </el-form-item>
                  <el-form-item>
                       <el-button type="warning" @click="save">确定</el-button>
                  </el-form-item>

              </el-form>

        </el-dialog>

    </div>
</template>

<script>
    /**
     * MVVM ：Model - View-VeiwModel(Vue实例，controller)
     * MVC :  Model - View -Controller
     * */

    export default {
        name: "User",
        data(){
            return {
                query:{
                    username:'',
                    roleId:-1
                },
                roles:[],
                users:[],

                info:{
                    userId:-1,
                    username:'',
                    roleId:-1,
                    isVisible:false
                }

            }
        },
        mounted(){


              this.axios({
                  url:'http://test.org/users',
                  method:'get',
                  dataType:'json'
              }).then((res)=>{
                   this.users=res.data;
              })

             this.axios({
                  url:'http://test.org/roles',
                  method:'get',
                  dataType:'json'
             }).then((res)=>{

                 this.roles = res.data;
                 this.roles.unshift({
                     roleId:-1,
                     name:'全部角色'
                 })


             })
        },methods:{
              add(){

                   this.info.userId = -1;
                    //页面初始化

                   this.info.isVisible = true;
              },
              edit(row) {
                  console.log(row);
                  this.info.userId = row.userId;
                  this.info.username = row.username;
                  this.info.roleId =row.role.roleId;
                  this.info.isVisible=true;
              },save(){

                  this.axios({
                       url:'http://test.org/role/save',
                       method:'post',
                       /**
                        * 传递实体的具体属性，
                        * 以便后台完成添加或者修改操作*/
                       dataType:'json'

                  }).then((res)=>{

                      if(res.data){
                          this.$message({
                              message:'编辑成功',
                              duration:2000
                          })
                      }

                  })
            }
        }
    }
</script>

<style scoped>
  .el-row{
      padding-top: 20px;
  }
    .el-select{
         width:100%;
    }
</style>